<template>
  <div>
    <Recommend></Recommend>
    <div class="right">
      <h2 class="r-text">华语男歌手</h2>
      <div>
        <span class="letter"> <a href="#" title="">A</a> </span
        ><span class="letter">
          <a href="#" title="">A</a>
        </span>
      </div>
      <div class="r-top">
        <ul>
          <li v-for="singerImg in TWOsingerCategory" :key="singerImg.id">
            <div class="u-cover">
              <img
                :src="singerImg.img1v1Url"
                alt=""
                style="width: 100px; height: 100px"
                @click="goDetail(singerImg.id)"
              />
              <a href="#" :title="singerImg.name"></a>
            </div>
            <p>
              <a href="#">{{ singerImg.name }}</a
              >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="iconfont icon-bussiness-man"></span>
            </p>
          </li>
        </ul>
      </div>
      <div class="r-bottom">
        <ul class="bottom-text">
          <li v-for="allList in allList" :key="allList.id">
            <a href="javascript:;" title="" @click="goDetail"
              >{{ allList.name }}111</a
            >
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Recommend from "@/pages/Singer/recommend";
import { reqSingerList, reqSingerSong } from "@/api";
export default {
  name: "Detail",
  components: { Recommend },
  data() {
    return {
      allList: [],
      TWOsingerCategory: [],
    };
  },
  methods: {
    goDetail(id) {
      this.$router.push(`/singerDetail/${id}`);
    },
  },
  //获取歌手
  async mounted() {
    const result = await reqSingerList();
    this.allList = result.artists;
    this.TWOsingerCategory = this.allList.slice(0, 10);
    console.log("歌手页", this.allList.slice(0, 20));
  },
};
</script>

<style lang="less" scoped>
.right {
  display: inline-block;
  height: auto;
  // border: 1px solid red;
  width: 790px;
  margin-top: 29px;
  position: absolute;
  .r-text {
    width: auto;
    height: 35px;
    font-size: 25px;
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
    border-bottom: 2px solid #c20c0c;
    margin: 0px 12px 0px 36px;
    padding: 0px 10px;
  }
  .letter {
    margin: 0px 5px;
  }
  .r-top {
    width: 100%;
    height: auto;
    border-bottom: 1px solid red;
    ul {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-left: 35px;
    }
    li {
      width: 20%;
      height: 170px;
      p {
      }
    }
  }
  .r-bottom {
    width: 100%;
    ul {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-left: 35px;
      li {
        width: 20%;
        margin: 10px 0px;
      }
    }
  }
}
</style>